<template>
  <div class="field-wrapper" @mouseover="enter" @mouseleave="leave">
    <div class="static-content-item selected">
      <el-button>{{data.name}}</el-button>
    </div>
   
    <div class="field-action" v-if="showOpt">
      <i title="删除组件" @click.stop="remove(data.fieldId)">
          <el-icon><Close /></el-icon>
      </i>
    </div>
  </div>
</template>



<script setup lang="ts">
  import { reactive, toRefs, watch} from 'vue'
  import {Close} from '@element-plus/icons-vue';

  const state = reactive({
    showOpt: false,
  });
  const {
    showOpt
  }  = toRefs(state);

  const parentData = defineProps({
      data:{
          type: String,
          name: String,
          fieldId:String,
       }
  });

  /**子组件调用父的方法**/
  const emits = defineEmits(['remove']);
  function remove(fieldId){
     emits('remove',fieldId)
  }

  

  function enter(){
     state.showOpt =true;
  }

  function leave(){
    state.showOpt =false;
  }

</script>

<style lang="scss" scoped>
  .field-wrapper {
    position: relative;

    .field-action{
      position: absolute;
      top: -2px;
      left: -1px;
      height: 15px;
      line-height: 15px;
      z-index: 9;

      i {
        border-radius: 50%;
        width: 12px;
        height: 10px;
        font-size: 8px;
        font-style: normal;
        color: #fff;
        background: red;
      }
    }
  }

  .field-action {
    :deep(.svg-icon) {
      margin-left: 0.1em;
      margin-right: 0.1em;
    }
  }

  .static-content-item {
    min-height: 20px;
    display: flex;  /* 垂直居中 */
    align-items: center;  /* 垂直居中 */

    :deep(.el-divider--horizontal) {
      margin: 0;
    }
  }
</style>
